<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理 - 员工列表</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }
        .action-buttons { margin-top: 20px; }
    </style>
    <script src="../js/jquery-1.8.3.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/api.js"></script>
    <script type="module" src="../js/components/navigation.js">

    </script>
</head>
<body>
<div class="app-container">
    <header class="app-header">
        <div class="logo">员工管理系统</div>
        <div class="user-info">
            <span id="username-display"></span>
            <button id="logout-btn" class="btn btn-secondary">退出登录</button>
        </div>
    </header>

    <div class="app-body">
        <aside class="sidebar">
            <nav class="menu">
                <ul>
                    <li><a href="#" class="menu-item active" data-target="welcome">欢迎页</a></li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">员工管理</a>
                        <ul class="submenu">
                            <li><a href="list.html" class="submenu-item">员工列表</a></li>
                            <li><a href="add.html" class="submenu-item">添加员工</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">业务管理</a>
                        <ul class="submenu">
                            <li><a href="../business/list.html" class="submenu-item">业务列表</a></li>
                            <li><a href="../business/create.html" class="submenu-item">创建业务</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">薪酬管理</a>
                        <ul class="submenu">
                            <li><a href="../salary/overview.html" class="submenu-item">薪酬概览</a></li>
                            <li><a href="../salary/manage.html" class="submenu-item">薪酬管理</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">系统设置</a>
                        <ul class="submenu">
                            <li><a href="../system/user.html" class="submenu-item">用户管理</a></li>
                            <li><a href="../system/profile.html" class="submenu-item">个人设置</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>

        <main class="content">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">员工列表</h2>
                    <a href="add.html" class="btn btn-primary">添加员工</a>
                </div>
                <div class="search-container">
                    <input type="text" id="eName" class="search-input" placeholder="请输入员工姓名">
                    <input type="text" id="position" class="search-input" placeholder="请输入员工部门">
                    <button id="search-btn" class="search-btn">搜索</button>
                </div>
                <div class="table-container">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>职位</th>
                            <th>部门</th>
                            <th>入职日期</th>
                            <th>薪资</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="employee-table-body"></tbody>
                        <tfoot id="page"></tfoot>
                    </table>
                </div>
            </div>
        </main>
    </div>
</div>

<script>
    $(document).ready(function() {
        show(1,"",-1);
        $("[id=search-btn]").click(function () {
            let ename=$("[id=eName]").val();
            let position=$("[id=position]").val();
            if(position=="" && position==null){
                position=-1;
            }
            show(1,ename,position);
        });
        $(document).on('click', '.view-detail-btn', function() {
            let eId = $(this).data('id'); // 正确获取data-id
            $.get("../employeeControl/select",{"eId":eId},function (employee) {
                $('#employee-table-body').empty();
                if(employee!=null){
                    $("<tr><td>编号</td><td>"+employee.eId+"</td></tr>\n" +
                        "<tr><td>姓名</td><td>"+employee.eName+"</td></tr>\n" +
                        "<tr><td>年龄</td><td>"+employee.age+"</td></tr>\n" +
                        "<tr><td>性别</td><td>"+employee.sex+"</td></tr>\n" +
                        "<tr><td>邮箱</td><td>"+employee.email+"</td></tr>\n" +
                        "<tr><td>电话</td><td>"+employee.phone+"</td></tr>\n" +
                        "<tr><td>生日</td><td>"+employee.birth+"</td></tr>\n" +
                        "<tr><td>职位</td><td>"+departmentId(employee.departmentId)+"</td></tr>\n" +
                        "<tr><td>部门</td><td>"+position(employee.positionId)+"</td></tr>").appendTo('#employee-table-body');
                }
            })
        });
        $(document).on('click', '.edit-btn', function() {
            let eId = $(this).data('id');
            // 先获取员工数据
            $.get("../employeeControl/select", {"eId": eId}, function(employee) {
                if(employee) {
                    // 显示编辑表单
                    showEditForm(employee);
                }
            });
        });

        // 分页按钮点击事件
        $(document).on("click", "tfoot input[type='button']", function() {
            let pageindex;
            if ($(this).attr("alt") == "确定") {
                let totalPages = $("tfoot i").attr("alt");
                let inputPage = $("#pageindex").val();
                if (inputPage >= 1 && inputPage <= totalPages) {
                    pageindex = inputPage;
                } else {
                    pageindex = 1;
                    alert("页码超出范围");
                }
            } else {
                pageindex = $(this).attr("alt");
            }

            let ename = $("#eName").val();
            let position = $("#position").val();
            if (position == "" || position == null) {
                position = -1;
            }
            show(pageindex, ename, position);
        });

        $(document).on("click",".delete-btn",function () {
            let eId = $(this).data('id');
            // 先获取员工数据
            $.get("../employeeControl/delete", {"eId": eId}, function(b) {
                if(b) {
                    alert("删除成功!");
                    show(1,"",-1);
                }else {
                    alert("删除失败");
                }
            });
        });

        function showEditForm(employee) {
            // 清空表格并显示编辑表单
            $('#employee-table-body').empty();

            // 安全地处理日期
            let birthDate = '';
            if (employee.birth) {
                try {
                    // 尝试创建日期对象
                    const dateObj = new Date(employee.birth);
                    // 检查日期是否有效
                    if (!isNaN(dateObj.getTime())) {
                        birthDate = dateObj.toISOString().split('T')[0];
                    }
                } catch (e) {
                    console.error('日期解析错误:', e);
                    // 如果解析失败，保持空字符串
                    birthDate = '';
                }
            }


            let editFormHtml = `
        <tr>
            <td colspan="8">
                <div style="background: #f9f9f9; padding: 15px; border-radius: 5px;">
                    <h3>编辑员工信息</h3>
                    <form id="edit-form">
                        <input type="hidden" name="eId" value="${employee.eId}">
                        <div style="display: flex; flex-wrap: wrap; margin: 0 -10px;">
                            <div style="flex: 1; padding: 0 10px; min-width: 200px; margin-bottom: 15px;">
                                <div class="form-group">
                                    <label>姓名:</label>
                                    <input type="text" name="eName" value="${employee.eName || ''}">
                                </div>
                            </div>
                            <div style="flex: 1; padding: 0 10px; min-width: 200px; margin-bottom: 15px;">
                                <div class="form-group">
                                    <label>年龄:</label>
                                    <input type="number" name="age" value="${employee.age || ''}">
                                </div>
                            </div>
                            <div style="flex: 1; padding: 0 10px; min-width: 200px; margin-bottom: 15px;">
                                <div class="form-group">
                                    <label>性别:</label>
                                    <div>
                                        <label><input type="radio" name="sex" value="男" ${employee.sex === '男' ? 'checked' : ''}> 男</label>
                                        <label><input type="radio" name="sex" value="女" ${employee.sex === '女' ? 'checked' : ''}> 女</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div style="display: flex; flex-wrap: wrap; margin: 0 -10px;">
                            <div style="flex: 1; padding: 0 10px; min-width: 200px; margin-bottom: 15px;">
                                <div class="form-group">
                                    <label>邮箱:</label>
                                    <input type="email" name="email" value="${employee.email || ''}">
                                </div>
                            </div>
                            <div style="flex: 1; padding: 0 10px; min-width: 200px; margin-bottom: 15px;">
                                <div class="form-group">
                                    <label>电话:</label>
                                    <input type="text" name="phone" value="${employee.phone || ''}">
                                </div>
                            </div>
                            <div style="flex: 1; padding: 0 10px; min-width: 200px; margin-bottom: 15px;">
                                <div class="form-group">
                                    <label>生日:</label>
                                    <input type="date" name="birth" value="${birthDate}">
                                </div>
                            </div>
                        </div>

                        <div style="display: flex; flex-wrap: wrap; margin: 0 -10px;">
                            <div style="flex: 1; padding: 0 10px; min-width: 200px; margin-bottom: 15px;">
                                <div class="form-group">
                                    <label>部门:</label>
                                    <input type="number" name="departmentId" value="${employee.departmentId || ''}">
                                </div>
                            </div>
                            <div style="flex: 1; padding: 0 10px; min-width: 200px; margin-bottom: 15px;">
                                <div class="form-group">
                                    <label>职位:</label>
                                    <input type="number" name="positionId" value="${employee.positionId || ''}">
                                </div>
                            </div>
                        </div>

                        <div class="action-buttons">
                            <button type="button" class="btn btn-success" id="save-edit-btn">保存</button>
                            <button type="button" class="btn btn-secondary" id="cancel-edit-btn">取消</button>
                        </div>
                    </form>
                </div>
            </td>
        </tr>
    `;

            $(editFormHtml).appendTo('#employee-table-body');

            // 保存按钮事件
            $('#save-edit-btn').click(function() {
                let formData = $('#edit-form').serialize();
                $.get("../employeeControl/update", formData, function(result) {
                    if(result) {
                        alert("更新成功!");
                        // 刷新表格
                        show($("#eName").val(), $("#position").val());
                    } else {
                        alert("更新失败!");
                    }
                });
            });

            // 取消按钮事件
            $('#cancel-edit-btn').click(function() {
                show($("#eName").val(), $("#position").val());
            });
        }
    });
    function departmentId(departmentId) {
        if(departmentId==101){
            return "技术部";
        }
        if(departmentId==102){
            return "市场部";
        }
        if(departmentId==103){
            return "财务部";
        }
        if(departmentId==104){
            return "人力资源部";
        }
    }
    function position(positionId) {
        if(positionId==1001){
            return "实习生";
        }
        if(positionId==1002){
            return "普通员工";
        }
        if(positionId==1003){
            return "部门主管";
        }
        if(positionId==1004){
            return "部长";
        }
    }
    function show(indexPage,eName,ePosition) {

        $.get("../employeeControl/employeeList", {"indexPage":indexPage,"ename": eName, "eposition": ePosition},
            function(list) {

                JSON.stringify(list);
                $('#employee-table-body').empty();
                if(list.listIndex.length != 0) {
                    for (let i = 0; i < list.listIndex.length; i++) {
                        let employee = list.listIndex[i];
                        $("<tr>" +
                            "<td>" + employee.eId + "</td>" +
                            "<td>" + employee.eName + "</td>" +
                            "<td>" + employee.age + "</td>" +
                            "<td>" + position(employee.positionId) + "</td>" +
                            "<td>" + departmentId(employee.departmentId) + "</td>" +
                            "<td>" + employee.hireDate + "</td>" +
                            "<td>" + employee.salary + "</td>" +
                            "<td>" +
                            "<button class='btn btn-secondary view-detail-btn' data-id='" + employee.eId + "'>查看</button>" +
                            "<button class='btn btn-primary edit-btn' data-id='" + employee.eId + "'>编辑</button>" +
                            "<button class='btn btn-danger delete-btn' data-id='" + employee.eId + "'>删除</button>" +
                            "</td>" +
                            "</tr>").appendTo('#employee-table-body');
                    }
                } else {
                    $("暂无数据").appendTo('#employee-table-body');
                }
                $("tfoot").empty();
                if (list.pageIndex != 1) {
                    $("<input style='width: 60px;height: 30px;margin-right: 20px;background: #3a56d4;color: white;border: none' type='button' value='上一页' alt='" + (list.pageIndex - 1) + "'/>").appendTo("tfoot");
                }
                for (var i = 1; i <= list.pageCount; i++) {
                    $("<input style='width: 30px;height: 30px;margin-right: 20px;background: #ced4da;color: white;border: none' type='button' value='" + i + "' alt='" + i + "'/>").appendTo("tfoot");
                }
                if (list.pageIndex != list.pageCount) {
                    $("<input style='width: 60px;height: 30px;margin-right: 20px;background: #3a56d4;color: white;border: none' type='button' value='下一页' alt='" + (list.pageIndex + 1) + "'/>").appendTo("tfoot");
                }
                $("<i alt='" + list.pageCount + "'>共" + list.pageCount + "页</i>").appendTo("tfoot");
                $("到第<input type='text' id='pageindex'/> 页</i>").appendTo("tfoot");
                $("<input style='width: 40px;height: 30px;margin-right: 20px;background: #ced4da;color: white;border: none' type='button' value='确定' alt='确定'/>").appendTo("tfoot");
            });
    }
</script>

</body>
</html>